
<template>
    <div class="pane">
        <el-row :span="24" class="paneRow">
            <el-col :span="8">
              <div class="panBox">
                <div class="paneCon">
                  <div>付费次数</div>
                  <div class="positionDiv">
                        <span>
                            {{payPart.payCnt}}笔
                        </span>
                  </div>
                </div>
                <div v-if="showCompareDate" class="ratio">
                  <span v-show="parseFloat(payPart.payCntRatio) >= 0"><img class="radio-icon" src="@/assets/img/up.png" alt=""></span>
                  <span v-show="parseFloat(payPart.payCntRatio) < 0"><img class="radio-icon" src="@/assets/img/down.png" alt=""></span>
                  <div class="radio-txt">{{Math.abs(parseFloat(payPart.payCntRatio))}}%</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="panBox">
                <div class="paneCon">
                  <div>付费人数</div>
                  <div class="positionDiv">
                        <span>
                            {{payPart.payNum}}人
                        </span>
                  </div>
                </div>
                <div v-if="showCompareDate" class="ratio">
                  <span v-show="parseFloat(payPart.payNumRatio) >= 0"><img class="radio-icon" src="@/assets/img/up.png" alt=""></span>
                  <span v-show="parseFloat(payPart.payNumRatio) < 0"><img class="radio-icon" src="@/assets/img/down.png" alt=""></span>
                  <div class="radio-txt">{{Math.abs(parseFloat(payPart.payNumRatio))}}%</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="panBox" style="border-right: none!important;">
                <div class="paneCon">
                  <div>付费金额</div>
                  <div class="positionDiv">
                        <span>
                            ¥
                            {{payPart.payPrice}}
                        </span>
                  </div>
                </div>
                <div v-if="showCompareDate" class="ratio">
                  <span v-show="parseFloat(payPart.payPriceRatio) >= 0"><img class="radio-icon" src="@/assets/img/up.png" alt=""></span>
                  <span v-show="parseFloat(payPart.payPriceRatio) < 0"><img class="radio-icon" src="@/assets/img/down.png" alt=""></span>
                  <div class="radio-txt">{{Math.abs(parseFloat(payPart.payPriceRatio))}}%</div>
                </div>
              </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: 'ksdatapane',
    props: {
        dataReportInfoYear: {
            type: Object,
            default: () => {},
        },
        payPart: {
          type: Object,
          default: () => {},
        },
        showCompareDate:{
          type: Boolean,
          default: () => { return false }
        }
    },
    components: {},
    data() {
        return {}
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
        changeDate() {},
    },
}
</script>
<style lang="scss" scoped>
.ratio{
  font-size: 17px;
  margin-top: 25px;
}
.radio-icon{
  width: 25px!important;
  height: 28px!important;
}
.radio-txt{
  margin-top: -29px;
  margin-left: 50px;
}
.panBox{
  width: 100%;
  height: 80%;
  border-right: #9fa5b6 solid 1px;
  display: flex;
  justify-content: space-between;
  padding-right: 40px;
  padding-top: 15px;
  box-sizing: border-box;
}
.pane {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    ._619add {
        color: #619add;
    }
    .paneRow {
        width: 100%;
        box-shadow: 0px 2px 11px 0px rgba(228, 233, 238, 1);
    }
    .el-col {
        align-self: center;
        text-indent: 25px;
        padding: 0 2%;
        height: 138px;
        border-radius: 4px;
        display: flex;
        // flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
        background: #fff;
        font-size: 22px;
        img {
            height: 48px;
            width: 44px;
            margin-top: 10px;
            margin-left: 25px;
        }
        .paneCon {
            div {
                height: 30px;
                line-height: 30px;
            }
            div:nth-of-type(1) {
                color: #619add;
                height: 20px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                line-height: 20px;
                padding-top: 14px;
            }
            .positionDiv {
                span {
                    font-weight: 500;
                }
            }
        }
    }
    .hasNew {
        text-indent: 0;
        width: 54px;
        height: 23px;
        line-height: 23px;
        border-color: transparent;
        position: absolute;
        top: 10px;
        right: 0;
        border-radius: 30px 0 0 30px;
        background: #fff4f0;
        color: #d24a19;
    }
}
</style>
